import React, { Component } from 'react';
import { WebView, View, StyleSheet } from 'react-native';

export default class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            webViewData:this.props.data
        }
    }
    //组件更新结束之后执行，在初始化render时不执行
    componentDidUpdate(){
        this._sendMessage();
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.option !== this.props.option) {
            this._sendMessage();
        }
    }
    _handleMessage(e) {
        this.setState({webViewData: e.nativeEvent.data});
    }
    _sendMessage() {
        this.refs.charts.postMessage(JSON.stringify(this.props.option));
    }
    render() {
        return (
            <View style={{flex: 1, height: this.props.height || 400,}}>
                <WebView
                    ref="charts"
                    scrollEnabled = {false}
                    style={{
                        height: this.props.height || 400,
                        backgroundColor: this.props.backgroundColor || 'transparent'
                    }}
                    scalesPageToFit={false}
                    source={{ uri: 'file:///android_asset/base/ImportantMap/map.html'}}
                    //require('../ImportantMap/map.html')
                    /*source={{html:"<h1 style='color:#ff0000'>欢迎访问 hangge.com</h1>"}}*/
                    onMessage={()=> this._handleMessage()}
                    />
            </View>
        );
    }
}
